CSS சப்-கிரிட் ட்ராக் பெயரிடுதல்: நெகிழ்வான தளவமைப்புகளுக்கு மரபுரிமையான கிரிட் கோடு அடையாளம்

CSS கிரிட் இணைய தளவமைப்பில் புரட்சியை ஏற்படுத்தியுள்ளது, இது இணையற்ற கட்டுப்பாட்டையும் நெகிழ்வுத்தன்மையையும் வழங்குகிறது. சப்-கிரிட் இதை ஒரு படி மேலே கொண்டு செல்கிறது, இது உள்ளமைக்கப்பட்ட கிரிட்கள் அவற்றின் பெற்றோர் கிரிட்டிலிருந்து ட்ராக் அளவை மரபுரிமையாகப் பெற அனுமதிக்கிறது. சப்-கிரிட்டின் ஒரு சக்திவாய்ந்த, ஆனால் சில நேரங்களில் கவனிக்கப்படாத, அம்சம் ட்ராக் பெயரிடுதல் ஆகும். சப்-கிரிட்களின் உள்ளார்ந்த மரபுரிமையுடன் இணைந்தால், இது சிக்கலான தளவமைப்புகள் மற்றும் பராமரிக்கக்கூடிய குறியீட்டிற்கு ஒரு நேர்த்தியான தீர்வை வழங்குகிறது.

CSS கிரிட் மற்றும் சப்-கிரிட்டைப் புரிந்துகொள்ளுதல்

ட்ராக் பெயரிடுதலைப் பற்றி ஆராய்வதற்கு முன், CSS கிரிட் மற்றும் சப்-கிரிட்டின் அடிப்படைகளை சுருக்கமாகப் பார்ப்போம்.

CSS கிரிட்

CSS கிரிட் தளவமைப்பு என்பது இணையத்திற்கான ஒரு இரு பரிமாண தளவமைப்பு அமைப்பாகும். இது ஒரு கண்டெய்னரை வரிசைகள் மற்றும் பத்திகளாகப் பிரிக்கவும், பின்னர் அந்த கிரிட் செல்களுக்குள் உள்ளடக்கத்தை வைக்கவும் உங்களை அனுமதிக்கிறது. முக்கிய கருத்துக்கள் பின்வருமாறு:

• கிரிட் கண்டெய்னர்: `display: grid` அல்லது `display: inline-grid` பயன்படுத்தப்படும் உறுப்பு.
• கிரிட் பொருட்கள்: கிரிட் கண்டெய்னரின் நேரடி குழந்தைகள்.
• கிரிட் ட்ராக்குகள்: கிரிட்டின் வரிசைகள் மற்றும் பத்திகள்.
• கிரிட் கோடுகள்: கிரிட் ட்ராக்குகளைப் பிரிக்கும் எண்ணிடப்பட்ட கோடுகள்.
• கிரிட் செல்கள்: கிரிட்டிற்குள் உள்ள தனிப்பட்ட பகுதிகள்.

உதாரணமாக, பின்வரும் HTML-ஐக் கவனியுங்கள்:

            <div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>
            

              
                Copy
              
            
          

மற்றும் CSS:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
            

              
                Copy
              
            
          

இது சம அகலமுள்ள மூன்று பத்திகள் மற்றும் ஒவ்வொன்றும் 100px உயரமுள்ள இரண்டு வரிசைகளைக் கொண்ட ஒரு கிரிட் கண்டெய்னரை உருவாக்குகிறது.

CSS சப்-கிரிட்

சப்-கிரிட் ஒரு கிரிட் பொருளை ஒரு கிரிட் கண்டெய்னராக மாற்ற அனுமதிக்கிறது, அதன் பெற்றோர் கிரிட்டின் ட்ராக் அளவை மரபுரிமையாகப் பெறுகிறது. உள்ளமைக்கப்பட்ட கூறுகள் பிரதான கிரிட்டுடன் சீரமைக்கப்பட வேண்டிய நிலையான தளவமைப்புகளை உருவாக்குவதற்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும். சப்-கிரிட்டை இயக்க, சப்-கிரிட் கண்டெய்னரின் `grid-template-columns` மற்றும்/அல்லது `grid-template-rows` பண்புகளை `subgrid` என அமைக்கவும்.

முந்தைய உதாரணத்தை விரிவுபடுத்துவோம்:

            <div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item subgrid-item">
    <div class="subgrid-content">Subgrid Content 1</div>
    <div class="subgrid-content">Subgrid Content 2</div>
  </div>
  <div class="grid-item">Item 3</div>
</div>
            

              
                Copy
              
            
          

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.subgrid-item {
  display: grid;
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.subgrid-content {
  /* Styles for content within the subgrid */
}
            

              
                Copy
              
            
          

இப்போது, `.subgrid-item` பெற்றோர் கிரிட்டிலிருந்து பத்தி மற்றும் வரிசை அளவுகளை மரபுரிமையாகப் பெற்று, அதன் உள்ளடக்கத்தை தடையின்றி சீரமைக்கும்.

CSS கிரிட்டில் ட்ராக் பெயரிடுதல்

ட்ராக் பெயரிடுதல் கிரிட் கோடுகளுக்கு அர்த்தமுள்ள பெயர்களை ஒதுக்க ஒரு வழியை வழங்குகிறது, இது உங்கள் CSS-ஐ மேலும் படிக்கக்கூடியதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. கிரிட் கோடுகளை அவற்றின் எண் குறியீட்டால் குறிப்பிடுவதற்குப் பதிலாக, நீங்கள் விளக்கமான பெயர்களைப் பயன்படுத்தலாம். இது குறியீட்டின் தெளிவை பெரிதும் மேம்படுத்துகிறது, குறிப்பாக சிக்கலான கிரிட்களில்.

சதுர அடைப்புக்குறிகளைப் பயன்படுத்தி, `grid-template-columns` மற்றும் `grid-template-rows` பண்புகளில் ட்ராக் பெயர்களை நீங்கள் வரையறுக்கலாம்:

            .grid-container {
  display: grid;
  grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
  grid-template-rows: [header-start] 50px [header-end content-start] auto [content-end footer-start] 30px [footer-end];
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், நாம் பல கிரிட் கோடுகளுக்குப் பெயரிட்டுள்ளோம்: `start`, `content-start`, `content-end`, `end`, `header-start`, `header-end`, `footer-start`, மற்றும் `footer-end`. ஒரு கிரிட் கோடு பல பெயர்களைக் கொண்டிருக்கலாம், அவை ஒரு இடைவெளியால் பிரிக்கப்படுகின்றன (எ.கா., `[header-end content-start]`).

பின்னர், `grid-column-start`, `grid-column-end`, `grid-row-start`, மற்றும் `grid-row-end` ஆகியவற்றைப் பயன்படுத்தி கிரிட் பொருட்களை நிலைநிறுத்த இந்த பெயர்களை நீங்கள் பயன்படுத்தலாம்:

            .grid-item {
  grid-column-start: content-start;
  grid-column-end: content-end;
  grid-row-start: content-start;
  grid-row-end: content-end;
}
            

              
                Copy
              
            
          

சப்-கிரிட் மூலம் மரபுரிமையான கிரிட் கோடு அடையாளம்

ட்ராக் பெயரிடுதலை சப்-கிரிட்டுடன் இணைக்கும்போது உண்மையான சக்தி வெளிப்படுகிறது. சப்-கிரிட்கள் பெற்றோர் கிரிட்டிலிருந்து ட்ராக் *அளவுகளை* மரபுரிமையாகப் பெறுகின்றன, ஆனால் அவை கிரிட் கோடுகளின் *பெயர்களையும்* மரபுரிமையாகப் பெறுகின்றன. இது பல நிலை உள்ளமைப்புகளுக்கு இடையிலும் நிலைத்தன்மையையும் படிக்கக்கூடிய தன்மையையும் பராமரிக்கும் ஆழமாக உள்ளமைக்கப்பட்ட தளவமைப்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.

தலைப்பு, உள்ளடக்கம் மற்றும் அடிக்குறிப்பு போன்ற ஒட்டுமொத்த தளவமைப்பை வரையறுக்கும் ஒரு பிரதான கிரிட் கொண்ட ஒரு வலைத்தளத்தின் காட்சியை கருத்தில் கொள்ளுங்கள். உள்ளடக்கப் பகுதிக்குள், கட்டுரைகளைக் காண்பிக்க ஒரு சப்-கிரிட் உள்ளது. கட்டுரை சப்-கிரிட் பிரதான கிரிட்டின் பத்தி அமைப்புடன் சரியாக சீரமைக்கப்படுவதை உறுதிசெய்ய நீங்கள் ட்ராக் பெயரிடுதலைப் பயன்படுத்தலாம்.

எடுத்துக்காட்டு: கட்டுரை சப்-கிரிட் உடன் வலைத்தள தளவமைப்பு

முதலில், பிரதான கிரிட்டை வரையறுக்கவும்:

            <div class="main-grid">
  <header class="header">Header</header>
  <main class="content">
    <article class="article">
      <h2 class="article-title">Article Title</h2>
      <p class="article-body">Article content goes here...</p>
    </article>
  </main>
  <footer class="footer">Footer</footer>
</div>
            

              
                Copy
              
            
          

            .main-grid {
  display: grid;
  grid-template-columns: [full-start] minmax(20px, 1fr) [content-start] minmax(300px, 8fr) [content-end] minmax(20px, 1fr) [full-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header header header"
    "content content content content"
    "footer footer footer footer";
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.content {
  grid-area: content;
  background-color: #fff;
  padding: 10px;
}

.footer {
  grid-area: footer;
  grid-column: full-start / full-end; /* Ensure the footer spans the full width */
  background-color: #eee;
  padding: 10px;
}
            

              
                Copy
              
            
          

இப்போது, `.article` உறுப்பை ஒரு சப்-கிரிட்டாக மாற்றி, பத்தி அமைப்பு மற்றும் பெயரிடப்பட்ட கிரிட் கோடுகளை மரபுரிமையாகப் பெறுவோம்:

            .article {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: content-start / content-end; /* Position article within content area */
  background-color: #f9f9f9;
  padding: 10px;
}

.article-title {
  grid-column: full-start / full-end; /* Spans the entire width of the subgrid */
}

.article-body {
  grid-column: content-start / content-end; /* Aligns with the content area of the main grid */
}
            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், `.article` உறுப்பு ஒரு சப்-கிரிட்டாக மாறுகிறது, `.main-grid`-இலிருந்து `full-start`, `content-start`, `content-end`, மற்றும் `full-end` என்ற பெயரிடப்பட்ட கிரிட் கோடுகளை மரபுரிமையாகப் பெறுகிறது. `.article-title` சப்-கிரிட்டின் முழு அகலத்தையும் பரப்பும் வகையில் வடிவமைக்கப்பட்டுள்ளது, அதே நேரத்தில் `.article-body` மரபுரிமையான கிரிட் கோடு பெயர்களுக்கு நன்றி, பிரதான கிரிட்டின் உள்ளடக்கப் பகுதியுடன் சீரமைக்கப்பட்டுள்ளது.

சப்-கிரிட்டுடன் ட்ராக் பெயரிடுதலைப் பயன்படுத்துவதன் நன்மைகள்

• மேம்படுத்தப்பட்ட வாசிப்புத்திறன்: எண் குறியீடுகளுக்குப் பதிலாக விளக்கமான பெயர்களைப் பயன்படுத்துவது உங்கள் CSS-ஐப் புரிந்துகொள்வதையும் பராமரிப்பதையும் எளிதாக்குகிறது.
• அதிகரித்த பராமரிப்புத்திறன்: நீங்கள் கிரிட் அமைப்பை மாற்ற வேண்டியிருக்கும் போது, ட்ராக் பெயர்கள் சீராக இருப்பதால், தளவமைப்பு உடைந்து போகும் அபாயம் குறைகிறது.
• மேம்படுத்தப்பட்ட நெகிழ்வுத்தன்மை: எண் குறியீடுகளை மீண்டும் கணக்கிட வேண்டிய அவசியமின்றி, கிரிட் பொருட்களின் கிரிட் கோடு பெயர்களை மாற்றுவதன் மூலம் அவற்றை எளிதாக இடமாற்றம் செய்யலாம்.
• நிலையான தளவமைப்புகள்: ட்ராக் பெயரிடுதலுடன் கூடிய சப்-கிரிட், உள்ளமைக்கப்பட்ட கூறுகள் பெற்றோர் கிரிட்டுடன் சரியாக சீரமைக்கப்படுவதை உறுதிசெய்கிறது, இது பார்வைக்கு ஈர்க்கும் மற்றும் நிலையான பயனர் அனுபவத்தை உருவாக்குகிறது.

நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

CSS சப்-கிரிட் ட்ராக் பெயரிடுதல் குறிப்பாக நன்மை பயக்கும் சில நடைமுறை எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள் இங்கே:

• சிக்கலான படிவங்கள்: ஒவ்வொரு படிவப் பகுதிக்கும் ஒரு பிரதான கிரிட் மற்றும் சப்-கிரிட்களைப் பயன்படுத்தி வெவ்வேறு பிரிவுகளில் படிவ லேபிள்கள் மற்றும் உள்ளீட்டு புலங்களை சீரமைக்கவும்.
• தயாரிப்பு பட்டியல்கள்: ஒவ்வொரு கார்டிலும் ஒரு சப்-கிரிட்டைப் பயன்படுத்தி படங்கள், தலைப்புகள் மற்றும் விளக்கங்களுடன் சீரமைக்கப்பட்ட நிலையான தயாரிப்பு கார்டு தளவமைப்புகளை உருவாக்கவும்.
• டாஷ்போர்டு தளவமைப்புகள்: பிரதான கிரிட்டின் பத்தி அமைப்பை மரபுரிமையாகப் பெறும் பல பேனல்களுடன் நெகிழ்வான டாஷ்போர்டு தளவமைப்புகளை உருவாக்கவும்.
• பத்திரிக்கை பாணி தளவமைப்புகள்: சப்-கிரிட் மற்றும் ட்ராக் பெயரிடுதலைப் பயன்படுத்தி தடையின்றி சீரமைக்கப்படும் சிறப்பு கட்டுரைகள் மற்றும் பக்க பட்டிகளுடன் சிக்கலான பத்திரிக்கை தளவமைப்புகளை வடிவமைக்கவும். நேஷனல் ஜியோகிராஃபிக் போன்ற வெளியீடுகள் தங்கள் தளவமைப்புகளை எவ்வாறு கட்டமைக்கக்கூடும் என்பதைக் கருத்தில் கொள்ளுங்கள்.
• இ-காமர்ஸ் தயாரிப்பு பக்கங்கள்: அமேசான் போன்ற இ-காமர்ஸ் தளங்களில் தயாரிப்பு படங்கள், தலைப்புகள், விளக்கங்கள் மற்றும் விலை நிர்ணய தகவல்களின் மீது துல்லியமான கட்டுப்பாட்டை அடையுங்கள், அங்கு காட்சி நிலைத்தன்மை பயனர் அனுபவத்திற்கு முக்கியமானது.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

ட்ராக் பெயரிடுதலுடன் `minmax()` ஐப் பயன்படுத்துதல்

வெவ்வேறு திரை அளவுகளுக்கு ஏற்றவாறு பதிலளிக்கக்கூடிய கிரிட்களை உருவாக்க, ட்ராக் பெயரிடுதலை `minmax()` செயல்பாட்டுடன் இணைக்கவும். உதாரணமாக:

            .grid-container {
  display: grid;
  grid-template-columns: [start] minmax(20px, 1fr) [content-start] minmax(300px, 8fr) [content-end] minmax(20px, 1fr) [end];
}
            

              
                Copy
              
            
          

இது உள்ளடக்கப் பகுதி எப்போதும் குறைந்தபட்சம் 300px அகலத்தைக் கொண்டிருப்பதை உறுதி செய்கிறது, ஆனால் கிடைக்கக்கூடிய இடத்தை நிரப்ப விரிவாக்க முடியும்.

மறைமுகமான மற்றும் வெளிப்படையான கிரிட்களுடன் வேலை செய்தல்

மறைமுகமான மற்றும் வெளிப்படையான கிரிட்களுக்கு இடையிலான வித்தியாசத்தை மனதில் கொள்ளுங்கள். வெளிப்படையான கிரிட்கள் `grid-template-columns` மற்றும் `grid-template-rows` ஐப் பயன்படுத்தி வரையறுக்கப்படுகின்றன, அதே நேரத்தில் வெளிப்படையான கிரிட்டிற்கு வெளியே உள்ளடக்கம் வைக்கப்படும்போது மறைமுகமான கிரிட்கள் தானாகவே உருவாக்கப்படுகின்றன. ட்ராக் பெயரிடுதல் முதன்மையாக வெளிப்படையான கிரிட்களுக்குப் பொருந்தும்.

உலாவி இணக்கத்தன்மை

சப்-கிரிட் நவீன உலாவிகளில் ஒப்பீட்டளவில் நன்கு ஆதரிக்கப்படுகிறது, ஆனால் Can I use... போன்ற ஆதாரங்களைப் பயன்படுத்தி உலாவி இணக்கத்தன்மையைச் சரிபார்ப்பது எப்போதும் ஒரு நல்ல யோசனையாகும். சப்-கிரிட்டை ஆதரிக்காத பழைய உலாவிகளுக்கு மாற்றுத் தீர்வுகளை வழங்கவும்.

அணுகல்தன்மை பரிசீலனைகள்

உங்கள் கிரிட் தளவமைப்புகள் குறைபாடுகள் உள்ள பயனர்களுக்கு அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். சொற்பொருள் HTML-ஐப் பயன்படுத்தவும் மற்றும் சுட்டி அல்லது பிற சுட்டும் சாதனத்தைப் பயன்படுத்த முடியாத பயனர்களுக்கு உள்ளடக்கத்தை அணுக மாற்று வழிகளை வழங்கவும். சரியாக கட்டமைக்கப்பட்ட தலைப்புகள், லேபிள்கள் மற்றும் ARIA பண்புக்கூறுகள் அணுகல்தன்மைக்கு முக்கியமானவை.

CSS சப்-கிரிட் ட்ராக் பெயரிடுதலுக்கான சிறந்த நடைமுறைகள்

• விளக்கமான பெயர்களைப் பயன்படுத்தவும்: கிரிட் கோடுகளின் நோக்கத்தைத் தெளிவாகக் குறிக்கும் ட்ராக் பெயர்களைத் தேர்வு செய்யவும்.
• நிலைத்தன்மையைப் பராமரிக்கவும்: உங்கள் திட்டம் முழுவதும் ஒரு நிலையான பெயரிடும் மரபைப் பயன்படுத்தவும்.
• அதிக சிக்கலான பெயர்களைத் தவிர்க்கவும்: ட்ராக் பெயர்களை சுருக்கமாகவும் எளிதில் நினைவில் கொள்ளக்கூடியதாகவும் வைத்திருங்கள்.
• உங்கள் கிரிட் அமைப்பை ஆவணப்படுத்தவும்: கிரிட் அமைப்பு மற்றும் ட்ராக் பெயரிடும் மரபுகளை விளக்க உங்கள் CSS-இல் கருத்துரைகளைச் சேர்க்கவும்.
• முழுமையாகச் சோதிக்கவும்: உங்கள் கிரிட் தளவமைப்புகள் எதிர்பார்த்தபடி செயல்படுகின்றன என்பதை உறுதிப்படுத்த வெவ்வேறு சாதனங்கள் மற்றும் உலாவிகளில் சோதிக்கவும்.

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

• குழப்பமான அல்லது தெளிவற்ற பெயர்களைப் பயன்படுத்துதல்: தெளிவாக இல்லாத அல்லது தவறாகப் புரிந்துகொள்ளக்கூடிய பெயர்களைப் பயன்படுத்துவதைத் தவிர்க்கவும்.
• நிலையற்ற பெயரிடும் மரபுகள்: உங்கள் திட்டம் முழுவதும் ஒரு நிலையான பெயரிடும் மரபைப் பின்பற்றுங்கள்.
• ட்ராக் பெயர்களை வரையறுக்க மறத்தல்: அனைத்து தொடர்புடைய கிரிட் கோடுகளுக்கும் ட்ராக் பெயர்களை வரையறுப்பதை உறுதி செய்யவும்.
• வெவ்வேறு உலாவிகளில் சோதிக்காமல் இருப்பது: இணக்கத்தன்மையை உறுதிப்படுத்த உங்கள் கிரிட் தளவமைப்புகளை எப்போதும் வெவ்வேறு உலாவிகளில் சோதிக்கவும்.
• சப்-கிரிட்டை அதிகமாகப் பயன்படுத்துதல்: சப்-கிரிட் சக்தி வாய்ந்தது என்றாலும், அது எப்போதும் சிறந்த தீர்வு அல்ல. ஒரு எளிய தளவமைப்பு அணுகுமுறை மிகவும் பொருத்தமானதாக இருக்குமா என்பதைக் கருத்தில் கொள்ளுங்கள்.

முடிவுரை

CSS சப்-கிரிட் ட்ராக் பெயரிடுதல் என்பது மேலும் பராமரிக்கக்கூடிய, நெகிழ்வான மற்றும் நிலையான தளவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும். மரபுரிமையான கிரிட் கோடு பெயர்களைப் பயன்படுத்துவதன் மூலம், நீங்கள் புரிந்துகொள்வதற்கும் மாற்றுவதற்கும் எளிதான சிக்கலான உள்ளமைக்கப்பட்ட கிரிட்களை உருவாக்கலாம். புதிய சாத்தியங்களைத் திறக்கவும் மற்றும் அற்புதமான வலை வடிவமைப்புகளை உருவாக்கவும் உங்கள் CSS கிரிட் பணிப்பாய்வுகளில் ட்ராக் பெயரிடுதலை ஏற்றுக்கொள்ளுங்கள். இந்த மதிப்புமிக்க திறமையை மாஸ்டர் செய்ய வெவ்வேறு தளவமைப்புகள், ட்ராக் பெயர்கள் மற்றும் பதிலளிக்கக்கூடிய நுட்பங்களுடன் பரிசோதனை செய்யுங்கள். நீங்கள் ஒரு எளிய வலைப்பதிவை அல்லது ஒரு சிக்கலான வலை பயன்பாட்டை உருவாக்குகிறீர்களானாலும், சப்-கிரிட் ட்ராக் பெயரிடுதல் பார்வைக்கு ஈர்க்கும் மற்றும் செயல்பாட்டு பயனர் இடைமுகங்களை உருவாக்க உதவும்.

ஒரு உலகளாவிய கண்ணோட்டத்தை ஏற்றுக்கொள்வதன் மூலமும், அணுகல்தன்மையைக் கருத்தில் கொள்வதன் மூலமும், உங்கள் CSS கிரிட் தளவமைப்புகள் அனைத்து பின்னணியிலிருந்தும் பயனர்களுக்கு உள்ளடக்கியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிசெய்யலாம்.